<template>
	<div class="tool-title-box">
		<h3>图文文本</h3>
		<div class="operation-box">
			<div class="item-box flex-style">
				<div class="title">文本高度</div>
				<div class="block">
					<el-slider :show-input-controls="false" input-size="mini" :min="32" :max="1200" v-model="activeComponent.data.height" show-input></el-slider>
				</div>
			</div>
			<tool-single-img v-model:imageUrl="activeComponent.data.imageUrl" tip="建议尺寸: 16 : 9等比例图片, 高度自适应"></tool-single-img>
			<tool-select-link v-model:linkObj="activeComponent.data.linkObj" title="图片链接"></tool-select-link>
			<tool-select v-model:checked="activeComponent.data.positionValue" title="图片位置" :options="positions"></tool-select>
			<div class="item-box">
				<tool-wang-editor v-model="activeComponent.data.content" :is-disable="false"></tool-wang-editor>
			</div>
		</div>
	</div>
</template>

<script lang="ts">
	import { toRefs, reactive, computed } from 'vue';
	import { useStore } from '/@/store/index';

	import ToolSingleImg from '/@/views/decorator/components/toolBar/module/tool-single-img.vue';
	import ToolSelect from '/@/views/decorator/components/toolBar/module/tool-select.vue';
	import ToolSelectLink from '/@/views/decorator/components/toolBar/module/tool-select-link.vue';
	import ToolWangEditor from '/@/views/decorator/components/toolBar/module/tool-wang-editor.vue';
	
	export default {
		name: 'image-text-tool',
		components: {
			ToolWangEditor,
			ToolSelect,
			ToolSelectLink,
			ToolSingleImg,
		},
		setup() {
			const store = useStore();
			const state = reactive({
				positions: [{
						value: "left",
						label: "左图右文"
					},
					{
						value: "right",
						label: "右图左文"
					},
					{
						value: "top",
						label: "上图下文"
					},
					{
						value: "bottom",
						label: "下图上文"
					}
				],
			});
			state.terminal = computed(() => store.state.decorator.terminal);
			state.activeComponent = computed(() => store.state.decorator.activeComponent);
			
			return {
				...toRefs(state)
			}
		}
	}
</script>

<style lang="scss" scoped>
@import './scss/index.scss';
</style>
